<template>
  <div>
    <button @click="fn">获取子组件</button>
    <button @click="name = 'rose'">修改name</button>
    <my-son ref="son"/>
    <p>{{ name }}</p>
    <hr>
    <button v-if="show" @click="fn2">搜索</button>
    <input v-else ref="txt" type="text">
  </div>
</template>

<script>
import MySon from './components/MySon.vue';
  export default {
    components: {
      MySon
    },
    data() {
      return {
        show: true,
        name: 'jack'
      }
    },

    methods: {
      async fn2 () {
  
        // 不就是让输入框显示了吗？但是dom渲染是异步的，
        // 所以这句话仅仅只是把数据给变了，但是界面还没更新
        this.show = false

        // 那为什么这里找不到？
        // console.log(this.$refs.txt)
        // 还要让输入框获得焦点
        // this.$refs.txt.focus()

        // this.$nextTick( () => {
        //   // 这个回调函数只会执行这一次，而且会在下一次dom更新后调用
        //   this.$refs.txt.focus()
        // })

        
        // this.$nextTick()
        // .then( () => {
        //   // 当下一次dom更新后调用
        //   this.$refs.txt.focus()
        // } )

          await this.$nextTick()
          // 后面的代码一定是等下一次dom更新后调用的
          this.$refs.txt.focus()
      },
      fn () {
        // 会得到son这个子组件对象,相当于就是获取到这个子组件内部的this
        // console.log(this.$refs.son)

        // 用处-快速进行父传子
        this.$refs.son.msg = '爹给你数据'
      }
    }
  }
</script>

<style>

</style>